<template>
    <div class="page" style="min-height:0">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label @click="toSearch" class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a  class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>
       <div class="margin-cg">
          <scroller :lock-y="true" v-ref:scrollerdom>
            <div class="scroller-wrap">
                <div class="mod-crumbs bg-color">
                    <div class="weui-cell__bd ">
                        <div class="nav-item" v-for="(index,hierarchy) in hierarchyList" >
                        <span v-if="index!=0" class="arrow">&gt;</span>
                        <a v-if="index < hierarchyListLen" @click.prevent="stepHierarchy(index)" >{{hierarchy}}</a>
                        <template v-else>{{hierarchy}}</template>
                        </div>
                    </div>
                </div>
             </div>
           </scroller>
       </div>
  
    </div>
        <div v-show="actions"  class="list com-border-bottom" style="margin-top: 0;">
            <ul>
                <li class="com-border-bottom">
                    <a class="touch" @click="toAddMember">
                        <span class="bg_sprite icon icon_add_member"></span>
                        <div class="info">添加人员</div>
                    </a>
                </li>
                <li class="com-border-bottom" v-if="!notAddGroup">
                    <a @click="toAddGroup" class="touch">
                        <span class="bg_sprite icon icon_add_team"></span>
                        <div class="info">添加部门</div>
                    </a>
                </li>
            </ul>
        </div>
        <div v-show="grouplist.length" class="weui-cells__title">下级部门</div>
        <div v-show="grouplist.length" class="list com-border-top com-border-bottom">
            <ul>
                <li v-for="(index, group) in grouplist" class="com-border-bottom">
                    <a class="touch" @click="stepNext(group.id, group.name, group.team_id, group.project_id)">
                        <span class="bg_sprite icon icon_team"></span>
                        <div class="info">{{group.name}}({{group.p_number}})</div><!--fixme-->
                        <span class="arrow"></span>
                    </a>
                </li>
            </ul>
        </div>
        <div v-show="ismembershow" class="weui-cells__title">该部门成员</div>
        <div v-show="ismembershow" class="list com-border-top com-border-bottom">
            <ul>
                <li v-for="(index, user) in userList" class="com-border-bottom" v-if="user.status==1">
                    <a @click="toUserInfo(user.user_id, user.group_id)" class="touch" >
                        <img v-if="user.logo.thumb_url" class="avatar" :src="user.logo.thumb_url" alt="">
                        <img v-else  class="avatar" src="../../static/imgs/avatar.png">
                        <div class="info">
                            <p class="title">
                                  <span v-if="user.status==1 && user.identity != 999999" class="tag" :class="{tag_1: (user.identity == 1||user.identity == 2) ,tag_2: user.identity == 3}">{{user.identity_str}}</span>
                                {{user.name}}
                            </p>
                        </div>
                        <div class="info" style="display: flex;align-items: center;justify-content: end;" v-if="user.entry_date">
                            <button class="btn" @click.stop="showEntryDate(user)">{{user.entry_date}}</button>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div v-show="notact" class="weui-cells__title">以下成员未下载或未关注灵云</div>
        <div v-show="notact" class="list com-border-top com-border-bottom">
            <ul>
                <li class="com-border-bottom" v-for="(index, user) in notActivation" v-if="user.status==0">
                    <a class="touch" href="javascript:;" @click="toUserInfo(user.user_id,user.group_id)" >
                        <div class="avatar-box">
                            <img v-if="user.logo.thumb_url" class="avatar" :src="user.logo.thumb_url" alt="">
                            <img v-else  class="avatar" src="../../static/imgs/avatar.png">
                            <span class="cover" v-if="user.status==0">未激活</span>
                        </div>
                        <div class="info">{{user.name}}
                            <span v-if="user.status==0 && user.identity != 999999" class="tag" :class="{tag_1: (user.identity == 1||user.identity == 2) ,tag_2: user.identity == 3}">{{user.identity_str}}</span>
                                
                        </div>
                         <span v-on:click.stop.prevent="wxInvite(user.identity)" v-if="user.status==0 && showHandleInvite" class="wx-invite">微信邀请</span>
                    </a>
                </li>
            </ul>
        </div>
        <div v-show="loading">
          <div class="weui-mask"></div>
          <div class="weui-toast">
              <i class="weui-loading weui-icon_toast"></i>
              <p class="weui-toast__content">数据加载中</p>
          </div>
        </div>
        <div class="modal" v-if="showCalendarValue">
            <div class="calendar-pannel">
                <div class="popup-title">
                    <div class="popup-title-text">入职日期选择</div>
                    <div class="close-popup"  @click.stop="showCalendar">关闭</div>
                </div>
                <inline-calendar 
                    :selector-array.sync="list" 
                    :weeks-list="weeksData"
                    :custom-slot-fn="customFn"
                    :value.sync="curDateValue"
                    :set-month="setMonth"
                    :set-year="setYear"
                    :month.sync="ourMonth"
                    :year.sync="ourYear" 
                    :start-date="startDate"
                    :end-date="endDate"
                    >
                </inline-calendar>
                <div class="btn-box bg-color fixed" @click="submit"><a href="javascript:;" class="weui-btn weui-btn_primary">确定</a></div>
            </div>
        </div>
        <formpopup :visible="visible" @close="onClose" @submit="onSubmit">
            <div class="graid-item">
                <div class="graid-item-label">姓名</div>
                <div class="graid-item-text">{{entryPersonData.nick_name}}</div>
            </div>
            <div class="graid-item">
                <div class="graid-item-label">出生年月</div>
                <div class="graid-item-text">{{entryPersonData.birthday}}</div>
            </div>
            <div class="graid-item">
                <div class="graid-item-label">身份证正面</div>
                <div class="graid-item-text" >
                    <img class="img" :src="entryPersonData.card_front" alt="" @click="previewPic(entryPersonData.card_front)">
                </div>
            </div>
            <div class="graid-item">
                <div class="graid-item-label">身份证反面</div>
                <div class="graid-item-text">
                    <img class="img" :src="entryPersonData.card_back" alt="" @click="previewPic(entryPersonData.card_back)">
                </div>
            </div>
            <div class="graid-item">
                <div class="graid-item-label">是否有健康证</div>
                <div class="graid-item-text">{{entryPersonData.is_health_cert == '1' ? '有' : '无'}}</div>
            </div>
            <div class="graid-item">
                <div class="graid-item-label">入职日期</div>
                <div class="graid-item-text" @click="showCalendar">{{entryPersonData.entryDate}}</div>
            </div>
        </formpopup>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import $ from 'zepto'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import clientUi from 'gapi/clientUi.js'
    import * as util from 'js/util.js'
    import GroupUtil from 'js/GroupUtil.js'
    import widget from 'gapi/widget'
    import socialApi from 'clientApi/socialApi'
    // import InlineCalendar from 'components/inline-calendar'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import Scroller from 'vux/dist/components/scroller'
    import { InlineCalendar } from 'vux'
    import Formpopup from 'components/Formpopup/Formpopup'
    /**
     *  组件实例对象
     */
    export default {
        components: {
          Scroller,
          InlineCalendar,
          Formpopup
        },
        data: function(){
            return{
                ismembershow:false,
                notact:false,
                isAddMemberPerm: false,
                showHandleInvite : false,
                notActivation:[],
                hierarchyList:[],
                userList: [],
                grouplist: [],
                // cacheGroupList: [],
                actions: true,
                loading: false,
                group: {},
                parentWebViewId: '',
                webViewId:'',
                b_len:'',
                notAddGroup: false ,//是否有添加小组权限
                setBtnShow: true,//设置按钮是否显示
                // 日历
                /*按天设置*/
                startDate:'',
                endDate:'',
                weeksData: ['日', '一', '二', '三', '四', '五', '六'],
                list:[],
                curDateValue: '',
                month: 0,
                year: 0,
                ourMonth: 0,
                ourYear: 0,
                showCalendarValue: false,
                entryId:'',
                visible:false,
                entryPersonData:{
                    card_front:'加载中...',
                    card_back:'加载中...',
                    is_health_cert:'加载中...',
                    nick_name:'加载中...',
                    birthday:'加载中...',
                    entryDate:'请选择入职日期'
                }
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
             initCalendar (){
                cache.getMemoryCache('workDate', (data) => {
                    console.log(data)
                    if(data){
                       this.list = data
                    }
                })
                let date = new Date()
                this.startDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
                this.endDate = (date.getFullYear()+1)+"-"+(date.getMonth()+1)+"-"+date.getDate()
            },  

            submit(){
                let date = new Date()
                let y = date.getFullYear()
                let m = date.getMonth() < 9 ? '0' + (date.getMonth()+1) : (date.getMonth()+1)
                let d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
                let today = y + '-' + m + '-' + d
                if(!this.curDateValue){
                    widget.toast('请选择日期')
                    return
                }
                this.entryPersonData.entryDate = this.curDateValue
                this.showCalendar()
                return
                let arr = []
                this.list.forEach ( (o) => {
                    if(o > today || o == today){
                        arr.push(o)
                    }
                })
                if(this.list.length && this.list.length ==1){
                    // commonPage.goBack(1,{'key':'workDate','value':arr.sort(),'pream':11})
                    alert(JSON.stringify(arr))
                    this.submitEntryDate(arr[0])
                }else{
                    widget.toast('请选择日期')
                }
            },
            submitEntryDate (){
                // commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/group/member_edit',
                    type:'POST',
                    data:{
                        team_id: this.tid,
                        project_id : this.pid,
                        group_id:this.entryGroupId,
                        user_id:this.entryUserId,
                        identity:999999,
                        entry_date: this.entryPersonData.entryDate
                    },
                    timeout:10000,
                    success:(result) => {
                        if (result.errno == 0){
                            this.visible = false
                            this.entryPersonData.entryDate = '请选择入职日期'
                            this.init()
                            widget.toast('入职成功')
                        }
                    },
                    error: (xhr, status) => {
                        // error
                        commonPage.loadPageStatus('loadSuccess')
                        var toastStr = ''
                        if(status == 'timeout'){
                        toastStr = '网络请求超时'
                        }else{
                        toastStr = '服务器异常'
                        }

                        widget.toast(toastStr)
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    } 
                })
            },
            showEntryDate(item){
                this.entryUserId= item.user_id
                this.entryGroupId= item.group_id
                this.entryPersonData = {
                    card_front:item.card_front,
                    card_back:item.card_back,
                    is_health_cert:item.is_health_cert,
                    nick_name:item.nick_name || item.name || item.real_name,
                    birthday:item.birthday,
                    entryDate:'请选择入职日期'
                }
                this.visible = true
            },
            onClose(){
                this.visible = false
            },
            onSubmit(){
                if(this.entryPersonData.entryDate === '请选择入职日期'){
                    widget.toast('请选择入职日期')
                    return
                }
                this.submitEntryDate()
            },
            previewPic(url){
                clientUi.bigPicturePreview('预览', [url], 0)
            },
            /***********************************************按天设置**************************************/
            setMonth() {
                let data = {
                    data1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                }
                let i = data.data1.indexOf($('.calendar-month-txt.calendar-title').html())
                let select = [i]
                clientUi.showPicker(data, select, '选择月份', (res) => {
                    if(res.data1){
                        this.ourMonth = parseInt(res.data1)
                    }else{
                        this.ourMonth = this.ourMonth
                    }
                    
                })
            },
            setYear() {
                let i = yearData.data1.indexOf($('.calendar-year-txt.calendar-title').html())
                let select = [i]
                clientUi.showPicker(yearData, select, '选择年份', (res) => {
                    if(res.data1){
                        this.ourYear = parseInt(yearData.data1[res.data1])
                    }else{
                        this.ourYear = this.ourYear
                    }
                })
            },
            showCalendar(user_id){
                this.showCalendarValue = !this.showCalendarValue
                this.user_id= user_id
            },
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                //从urd中获取参数 groupid, grounpname
                this.gid = util.getUrddataString('gid') //groupid
                this.name = util.getUrddataString('gname') //grounpname
                this.tid = util.getUrddataString('tid') //teamid
                this.pid = util.getUrddataString('pid') //projectid
                this.uid = util.getUrddataString('uid') //userId
                document.title = this.name //子小组页面title
                commonPage.getWebViewID((data)=>{
                    if(data){
                        this.webViewId = data
                    } 
                })
                window.loadData = (data) => {
                    this.getGroupList()
                }
                this.getGroupList()
                this.getPermissions()
                this.initCalendar()
            },
            // 成员搜索
            toSearch() {
                let url = `tid=${this.tid}&pid=${this.pid}&gid=${this.gid}&uid=${this.uid}&originpage=xmmember`
                location.href="dmsaas://ProjectSearchMember?urdData="+encodeURIComponent(url)
            },
            //添加人员
            toAddMember() {
              let url = `tId=${this.tid}&pId=${this.pid}&gId=${this.gid}&uId=${this.uid}&groupName=${this.name}&type=${2}`
              // alert(url)
              window.location.href="dmsaas://ProjectAddMember?urdData="+encodeURIComponent(url)
            },
            //添加小组
            toAddGroup (){
              let url = `tId=${this.tid}&pId=${this.pid}&gId=${this.gid}&groupName=${this.name}`
              // alert(url)
              window.location.href="dmsaas://ProjectAddGroup?urdData="+encodeURIComponent(url)
            },
            /**
             * 跳转下一级
             * @param  {[type]}
             * @return {[type]}
             */
            stepNext(gid,name,tid,pid){
                  window.location.href="dmsaas://ProjectGroupInfo?urdData="+encodeURIComponent(`gid=${gid}&gname=${name}&tid=${tid}&pid=${pid}&webViewId=${this.webViewId}`)
            },
            /**
            * 点击对应层级
            *
            * @return {[type]}
            */
           stepHierarchy(index){
               let cacheKey = `groupInfoWebView_${index}`;
               if (index == 0) {
                   cacheKey = 'memberViewId';
               }
                cache.getMemoryCache(cacheKey,(data)=>{
                    if(data){
                        commonPage.goBack(1,{'goBackKey':'index','value':index}, data.webViewID)

                    }
                })
            },
            toUserInfo (uid, gid){
                cache.deleteMemoryCache('uInfo');
                let uinfo = {
                    uid: uid,
                    gid: gid,
                }
                cache.setMemoryCache('uInfo', uinfo);
                let url = `uid=${uid}&gid=${gid}&tid=${this.tid}&pid=${this.pid}`
                location.href = "dmsaas://ProjectMemberDetail?urdData=" + encodeURIComponent(url)
            },
            wxInvite (identity){//todo
                console.log(identity)
                util.ajax({//获取邀请链接
                    url:'/group/wechat',
                    type:'GET',
                    data:{
                        group_id: this.gid,
                        team_id: this.tid,
                        project_id : this.pid,
                        identity:identity
                    },
                    timeout:10000,
                    beforeSend: () => {

                    },
                    success:(result) => {
                        if(result.errno == 0){
                            let rData = result.data;
                            this.inviteLink = rData.url;
                            let data = {
                                title: rData.title,
                                text: rData.text,
                                logo: rData.logo,
                                url: this.inviteLink,
                                type:1
                            }
                            socialApi.weiXinShare(data)

                        }
                    },
                    error: (xhr, status) => {
                        // error
                        var toastStr = ''
                        if(status == 'timeout'){
                            toastStr = '网络请求超时'
                        }else{
                            toastStr = '服务器异常'
                        }

                        widget.toast(toastStr)
                    },
                    complete: () => {

                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            //获取当前小组信息
            getGroupList (){
                util.ajax({
                    url:'/group/member_list_page',
                    type:'GET',
                    data:{
                        team_id: this.tid,
                        group_id : this.gid,
                        project_id : this.pid
                    },
                    timeout:10000,
                    beforeSend: () => {
                    this.loading = true
                    },
                    success:(result) => {
                        console.log(result)
                        if(result.errno == 0){
                            this.notActivation = []
                            this.hierarchyList = result.data.path
                            if(result.data.child_group != null){
                                this.grouplist = result.data.child_group
                            }
                            if(result.data.member_list != null){
                                this.userList = result.data.member_list
                                // console.log(this.userList)
                                if(this.userList&&this.userList.length){
                                    this.ismembershow = true
                                }else{
                                    this.ismembershow = false
                                }
                                result.data.member_list.forEach( (item) => {
                                    if(item.status == 0){
                                        this.notActivation.push(item)
                                    }
                                })
                            }
                            if(this.notActivation&&this.notActivation.length){
                                this.notact = true
                            }else{
                                this.notact = false
                            }
                            commonPage.getWebViewID((data)=>{
                                var index = this.hierarchyList.length - 1;
                                cache.setMemoryCache(`groupInfoWebView_${index}`,{'webViewID':data})
                                cache.setMemoryCache(`childGroupWebView`,{'webViewID':data})
                                console.log(data)
                            })
                        }else{
                            widget.toast(result.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        // error
                        let toastStr = ''
                        if(status == 'timeout'){
                            toastStr = '网络请求超时'
                        }else{
                            toastStr = '服务器异常'
                        }

                        widget.toast(toastStr)
                    },
                    complete: () => {
                        this.loading = false
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
              })
            },
            getPermissions(){
                let addGroup = true,
                    addGroupLabelStr = 'invisible_man'
                util.ajax({
                    url: '/permission/application',
                    data: {
                        team_id: this.tid,
                        project_id: this.pid,
                        application_id: 0
                    },
                    success: (res) => {
                        // alert('权限信息')
                        // console.log(JSON.stringify(res))
                        if(res.errno == 0){
                            this.showHandleInvite = res.data.some((o, i, a) => {
                                if(o.id_name == 'show_handle_invite'){
                                    return true
                                }
                            })
                            //是否有添加小组权限
                            addGroup = res.data.some((o, i, a) => {
                                if(o.id_name == addGroupLabelStr){
                                    // alert(333)
                                    this.setBtnShow = false
                                    return true
                                }
                            })
                            this.notAddGroup = addGroup
                            this.btnShow();

                        }else{
                            widget.toast(res.errmsg)
                        }
                    },
                    error: (xhr, error) => {
                        widget.toast('服务器异常')
                    }
                })
            },
            btnShow(){
                commonPage.updateTitleBar({
                  backAction: '',
                  leftDisplay: true,
                  leftText: '关闭',
                  leftAction: 'closePage',
                  rightDisplay: this.setBtnShow,
                  rightText: '设置',
                  rightAction: 'xmConfig'
                })
            }
        },
        created(){
            window.closePage = function () {
                cache.getMemoryCache('memberViewId', (data) => {
                    console.log(data)
                    if(data){
                        commonPage.goBack(1,{},data.webViewID)
                    } 
                })
                // commonPage.goBack(1)
                // location.href = 'dmsaas://ProjectMember';
            }
            this.init();          

            this.parentWebViewId = util.getUrddataString('webViewId')

            window.xmConfig = () => {
              let str = encodeURIComponent(`team_id=${this.tid}&project_id=${this.pid}&groupname=${this.name}&groupid=${this.gid}&webViewId=${this.parentWebViewId}`)
              location.href = `dmsaas://ProjectSetGroup?urdData=${str}`
            }

            window.loadData = (data)=>{
                console.log(data)
                if(data && data.groupName){
                  // 更新title
                  if(data.pream && data.pream == 555){
                     this.stepHierarchy(0)
                     this.hierarchyList = []
                     commonPage.getWebViewID((data)=>{
                        var index = 0;
                        cache.setMemoryCache(`groupInfoWebView_${index}`,{'webViewID':data})
                        cache.setMemoryCache(`childGroupWebView`,{'webViewID':data})
                    })
                  }
                    
                }
                this.getGroupList()
            }
        },
        watch: {
          'hierarchyList': function(){
            let allWidth = 0
            this.$nextTick(function () {
              if($('.scroller-wrap .nav-item').length){
                $('.scroller-wrap .nav-item').each(function(i, o){
                  // alert($(o).width() + '--' + o.tagName)
                  allWidth += parseInt(o.offsetWidth)
                })
                allWidth += 30
                $('.scroller-wrap').width(allWidth + 'px')

                this.$refs.scrollerdom.reset()
              }
            })
          }
        },
        ready(){
          // this.$nextTick(function () {
          //   alert($('.scroller-wrap span').length)
          //   $('.scroller-wrap span').each(function(i, o){

          //   })
          // })

        },
        computed : {
            hierarchyListLen() {
                return this.hierarchyList.length - 1;
            }
        }
    }


</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/user-list.css"></style>
<style>
  .scroller-wrap .nav-item{
    float: left;
  }
  .xs-container{
    background: #fff;
  }
</style>
<style>
.calendar-pannel{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 90%;
        background: #fff;
        z-index: 999;
        border-radius: 10px 10px 0 0;
    }
    .popup-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        width: 100%;
        height: 60px;
        box-sizing: border-box;
    }
    .popup-title-text{
        flex: 1;
    }
    .modal{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.6);
        z-index: 10000;
    }
</style>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<!-- <style src="../../static/css/calendar.css"></style> -->
<style>
    /*!
 * Vux v0.1.3 (https://vux.li)
 * Licensed under the MIT license
 */
.vux-next-icon,.vux-prev-icon{position:absolute;left:0;top:15px;display:inline-block;width:12px;height:12px;border:1px solid #04be02;border-radius:0;border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg);margin-left:15px;line-height:40px}.vux-next-icon{-webkit-transform:rotate(-135deg);transform:rotate(-135deg);left:auto;top:14px;right:15px}.vux-prev-icon:before{display:block;width:12px;height:12px;border:1px solid #04be02;border-width:1px 0 0 1px;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.is-weekend-highlight td.is-week-0,.is-weekend-highlight td.is-week-6,.is-weekend-highlight td.is-week-list-0,.is-weekend-highlight td.is-week-list-6{color:#e59313}.inline-calendar a{text-decoration:none;tap-highlight-color:transparent}.calendar-month,.calendar-year{position:relative}.calendar-header{line-height:40px;font-size:1.2em;overflow:hidden}.calendar-header>div{float:left;width:50%;text-align:center;overflow:hidden}.calendar-header a:last-of-type{float:right;vertical-align:bottom}.calendar-title,.switch-btn{display:inline-block;border-radius:4px;line-height:30px}.switch-btn{width:30px;margin:5px;color:#39b5b8;font-family:SimSun}.calendar-title{padding:0 6%;color:#333}.calendar-header a.active,.calendar-title:active,.switch-btn:active{background-color:#39b5b8;color:#fff}.calendar-week{overflow:hidden}.calendar-week span{float:left;width:14.28%;font-size:1.6em;line-height:34px;text-align:center}.inline-calendar{width:100%;background:#fff;border-radius:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.inline-calendar td.is-today,.inline-calendar td.is-today.is-disabled{color:#04be02}.calendar-enter,.calendar-leave{opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}.calendar:before{top:-10px;border-bottom-color:#dedede}.calendar:after,.calendar:before{position:absolute;left:30px;content:"";border:5px solid transparent}.calendar:after{top:-9px;border-bottom-color:#fff}.calendar-tools{height:32px;font-size:20px;line-height:32px;color:#04be02}.calendar-tools .float.left{float:left}.calendar-tools .float.right{float:right}.calendar-tools input{font-size:20px;line-height:32px;color:#04be02;width:70px;text-align:center;border:none;background-color:transparent}.calendar-tools>i{margin:0 16px;line-height:32px;cursor:pointer;color:#707070}.calendar-tools>i:hover{color:#5e7a88}.inline-calendar table{clear:both;width:100%;border-collapse:collapse;color:#444}.inline-calendar td{padding:5px 0;text-align:center;vertical-align:middle;font-size:16px;position:relative}.inline-calendar td.is-disabled,.inline-calendar td.week{pointer-events:none!important;cursor:default!important}.inline-calendar td.is-disabled{color:silver}.inline-calendar td>span{display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;text-align:center}.vux-calendar-range.inline-calendar td.current{background-color:#04be02}.vux-calendar-range table{margin-bottom:10px}.inline-calendar td.current>span{background-color:#04be02;color:#fff}.inline-calendar .timer{margin:10px 0;text-align:center}.inline-calendar .timer input{border-radius:2px;padding:5px;font-size:14px;line-height:18px;color:#5e7a88;width:50px;text-align:center;border:1px solid #efefef}.inline-calendar .timer input:focus{border:1px solid #5e7a88}.calendar-button{text-align:center}.calendar-button button{border:none;cursor:pointer;display:inline-block;min-height:1em;min-width:8em;vertical-align:baseline;background:#5e7a88;color:#fff;margin:0 .25em 0 0;padding:.8em 2.5em;font-size:1em;line-height:1em;text-align:center;border-radius:.3em}.calendar-button button.cancel{background:#efefef;color:#666}.vux-popup{border-top:2px solid #04be02}.vux-popup-dialog{position:fixed;left:0;bottom:0;width:100%;background:#eee;z-index:101;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;transition-duration:.3s}.vux-popup-mask{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;tap-highlight-color:transparent;z-index:-1}.vux-popup-mask.vux-popup-show{opacity:1;z-index:100;-webkit-transition:opacity .3s;transition:opacity .3s}.vux-popup-enter,.vux-popup-leave{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.vux-tap-active{tap-highlight-color:transparent}.vux-tap-active:active{background-color:#ececec}.weui_cell{position:relative}.weui_cell:before{content:" ";position:absolute;left:0;top:0;width:100%;height:1px;border-top:1px solid #d9d9d9;color:#d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5);left:15px}.weui_cell:first-child:before{display:none}.weui_cells{margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px;overflow:hidden;position:relative}.weui_cells:before{top:0;border-top:1px solid #d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0}.weui_cells:after,.weui_cells:before{content:" ";position:absolute;left:0;width:100%;height:1px;color:#d9d9d9;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui_cells:after{bottom:0;border-bottom:1px solid #d9d9d9;-webkit-transform-origin:0 100%;transform-origin:0 100%}.weui_cells_title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#888;font-size:14px}.weui_cells_title+.weui_cells{margin-top:0}.weui_cells_tips{margin-top:.3em;color:#888;padding-left:15px;padding-right:15px;font-size:14px}.weui_cell{padding:10px 15px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.weui_cell_ft{text-align:right;color:#888}.weui_cell_primary{-webkit-box-flex:1;-ms-flex:1;flex:1}.weui_cell_bd>p{color:#000}.weui_cell_ft.with_arrow:after{content:" ";display:inline-block;-webkit-transform:rotate(45deg);transform:rotate(45deg);height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;position:relative;top:-1px;margin-left:.3em}.vux-label-desc{font-size:14px;color:#666}
</style>
<!-- <style src="../../static/css/common.css"></style> -->
<style>
    html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    font-family: "Helvetica Neue", "Microsoft Yahei", sans-serif;   
    font-size: 14px;
    background: #f2f2f2;
    color: #333;
}
html, body {
    height: 100%;
}
input, textarea, select, button {
    font-size: 16px;
    font-family: "Helvetica Neue", "Microsoft Yahei", sans-serif;
    color: #333;
}
input:focus, textarea:focus {
    outline: none;
}
textarea {
    resize: none;
}
::-webkit-input-placeholder {
    color: #ccc;
}
ol, ul {
    list-style: none;
}
a {
    color: #333;
}
em {
    font-style: normal;
}
.page {
    overflow: hidden;
    min-height: 100%;
    box-sizing: border-box;
}
.page.show-navbar {
    padding-top: 40px;
}
.page.show-tabbar {
    padding-bottom: 44px;
}
.page.show-footerBtn {
    padding-bottom: 64px;
}
.red-dot {
    display: inline-block;
    min-width: 18px;    
    height: 18px;   
    line-height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    text-align: center;
    background: #f40;
    font-size: 12px;
    color: #fff;
    border-radius: 9px;
}
.touch {
    background: #fff;
}
.touch:active {
    background: #fafafa !important;
}
.mod-btn-box {
    padding: 30px 20px;
}
.link-access {
    position: relative;
}
.link-access::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 12px;
    top: 50%;
    margin: -4px 2px 0 0;
}
.bg_sprite, .hierarchy::before, .btn_add::before {
    display: inline-block;
    background-image: url(../../static/imgs/sprite.png);
    background-repeat: no-repeat;
    -webkit-background-size: 250px auto;
    background-size: 250px auto;
}
.bg-color {
    background: #fff !important;
}
.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
}

/* reset weui */
.weui-cells__title {
    color: #bbb;
    margin: 0;
    line-height: 20px;
    padding: 14px 12px 6px;
}
.weui-cells__title span {
    margin-right: 14px;
}
.weui-cells {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 12px;   
}
.searchbar + .weui-cells {
    margin-top: -1px;
}
.weui-cells:before, .weui-cells:after, .weui-cell:before, .weui-actionsheet__cell:before {
    border-color: #e5e5e5;
}
.weui-cell {
    padding: 12px;
}
.weui-cell:before {
    left: 12px;
}
.weui-cells_form .weui-cell__ft {
    line-height: 0;
}
.weui-cells_checkbox .weui-cell:before {
    left: 47px;
}
.weui-cell_select {
    padding: 0;
}
.weui-cell_select-after {
    padding-left: 12px;
}
.weui-select {
    height: 48px;
    line-height: 48px;
}
.weui-cell_select .weui-cell__bd:after {
    right: 12px;
}
.weui-cell_access:active, .weui-actionsheet__cell:active, .weui-dialog__btn:active, .weui-cells_checkbox .weui-cell:active {
    background-color: #fafafa;
}
.weui-cell__bd {
    overflow: hidden;
}
.weui-cell__bd p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weui-cell__bd .title, .weui-label {
    color: #999;
    display: inline-block;
    width: auto;
    min-width: 64px;
    margin-right: 18px;
}
.weui-cell__bd .placeholder {
    color: #ccc;
}
.weui-input {
    height: 1.5em;
    line-height: 1.5;
}
.weui-btn {
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    border-radius: 2px;
}
.weui-btn_primary {
    background-color: #fa0;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
    background-color: #f90;
}
.weui-btn_disabled.weui-btn_primary {
    background-color: rgba(255, 170, 0, 0.4);
}
.weui-btn_disabled.weui-btn_primary.fixed {
    background: #fd9;
}
.weui-btn_primary:after, .weui-btn_warn:after {
    display: none;
}
.weui-btn.fixed {
    position: fixed;
    z-index: 99;
    width: 100%;
    border-radius: 0;
    left: 0;
    bottom: 0;
}
.weui-btn.fixed::after {
    display: none;
}
.weui-cells_radio .weui-check:checked + .weui-icon-checked:before, .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
    color: #fa0;
}
.weui-tabbar {
    position: fixed;
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: #fa0;
}
.weui-search-bar__cancel-btn {
    color: #333;
    font-size: 16px;
}
.weui-cell_switch {
    padding: 8px 12px;
}
.weui-switch:checked {
    background-color: #fa0;
    border-color: #fa0;
}
.weui-mask {
    background: rgba(0, 0, 0, 0.5);
}
.weui-dialog__hd {
    font-size: 18px;
    line-height: 24px;
    padding: 25px 18px 10px;
}
.weui-dialog__bd {
    font-size: 16px;
    line-height: 22px;
    min-height: 0;
    padding: 0 18px 15px;
}
.weui-dialog__bd:first-child {
    padding: 25px 18px 15px;
    color: #999;
}
.weui-cell__ft {
    color: #bbb;
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
    min-height: 24px;
    box-sizing: border-box; 
}
.weui-cell__ft span {
    margin-right: 10px;
}
.weui-cell__ft span:last-child {
    margin-right: 0;
}
.weui-dialog__ft:after, .weui-dialog__btn:after {
    border-color: #e5e5e5;
}
.weui-dialog__btn_default {
    color: #999;
}
.weui-dialog__btn_primary {
    color: #333;
}
.searchbar {
    position: relative;
}
.weui-search-bar {
    background-color: #f2f2f2;
}
.weui-search-bar::before, .weui-search-bar::after {
    border-color: #e5e5e5;
}
.weui-search-bar__label, .weui-icon-search {
    color: #ccc;
}
.weui-search-bar__label {
    line-height: 26px;
}
.searchbar-result {
    width: 100%;
    font-size: 14px;
    margin-top: 0;
    position: absolute !important;
    left: 0;
    top: 44px;
    z-index: 10;
}
.searchbar-result .keyword {
    color: #fa0;
}
.weui-cells_checkbox .weui-cell__hd {
    padding-right: 0;
}
[class^="weui-icon-"]:before, [class*=" weui-icon-"]:before {
    margin: 0 12px 0 0;
}
.weui-icon-search:before, .weui-icon-clear:before, .weui-cells_radio .weui-icon-checked::before {
    margin: 0;
}
.weui-textarea-counter {
    font-size: 14px;
    color: #999;
}
/* .weui-textarea-counter span {
    color: #535353;
} */

/* mod-tabs */
.mod-tabs {
    display: -webkit-box;
    display: flex;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(234, 233, 233, 0.5);
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99;
}
.mod-tabs li {
    -webkit-box-flex: 1;
    flex: 1;
    text-align: center;
}
.mod-tabs a {
    display: block;
    height: 40px;
    line-height: 40px;
    color: rgba(153, 153, 153, 0.9);
}
.mod-tabs a.current {
    color: rgb(102, 102, 102);
    box-shadow: 0 -2px 0 rgb(255, 187, 0) inset;
    font-weight: bold;
}

/* border */
[class*="com-border-"] {
    position: relative;
    overflow: hidden;
}
.com-border-top::before, .com-border-bottom::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgb(229, 229, 229);   
    left: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);  
    z-index: 9;
}
.com-border-top::before {
    top: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.com-border-bottom::after {
    bottom: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.com-border-outside::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid rgb(229, 229, 229);
    box-sizing: border-box;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    left: 0;
    top: 0;
}
[class*="com-border-"].ml::before, [class*="com-border-"].ml::after {
    left: 12px;
}

/* upload pic */
.upload-pic {
    background: #fff;
    padding: 15px 0 8px 12px;
    overflow: hidden;
    position: relative;
}
.upload-pic h2 {    
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    color: #999;
    margin-bottom: 20px;
}
.upload-pic .pic-list {
    overflow: visible;
}
.upload-pic .pic-list li {
    float: left;
    margin: 0 12px 12px 0;
    position: relative;
}
.upload-pic .pic-list img {
    display: block;
    width: 60px;
    height: 60px;
}
.upload-pic .btn-delete {
    width: 18px;
    height: 18px;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    right: -8px;
    top: -10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.upload-pic .btn-delete::before, .upload-pic .btn-delete::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 1px;
    left: 50%;
    top: 50%;
}
.upload-pic .btn-delete::before {
    width: 10px;
    height: 2px;
    margin: -1px 0 0 -5px;
}
.upload-pic .btn-delete::after {
    width: 2px;
    height: 10px;
    margin: -5px 0 0 -1px;
}
.uploader {
    width: 60px;
    height: 60px;
    float: left;
    margin: 0 12px 12px 0;
    position: relative;
    background: #fff;
}
.uploader.disabled {
    opacity: 0.4;
}
.uploader input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    outline: none;
    opacity: 0;
}
.uploader div::before, .uploader div::after {
    content: "";
    position: absolute;
    background: rgb(204, 204, 204);
    left: 50%;
    top: 50%;
    border-radius: 2px;
}
.uploader div::before {
    width: 28px;
    height: 2px;
    margin: -1px 0 0 -14px;
}
.uploader div::after {
    width: 2px;
    height: 28px;
    margin: -14px 0 0 -1px;
}
.uploader::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid rgb(204, 204, 204);
    box-sizing: border-box;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

/* calendar */
.inline-calendar {
    overflow: hidden;
}
.inline-calendar table {
    color: #333;
    margin-bottom: 5px;
}
.calendar-header {
    font-size: 16px;
    line-height: normal;
    text-align: center;
}
.calendar-header > div {
    line-height: 22px;
    padding: 16px 22px 6px;
    float: none;
    width: auto;
    display: inline-block;
    position: relative;
    margin: 0 10px;
}
.calendar-title {
    line-height: inherit;
    padding: 0 20px;    
}
.calendar-title:active {
    background: transparent;
    color: #333;
}
.vux-prev-icon, .vux-next-icon {
    width: 22px;
    height: 22px;
    border: none;   
    margin: 0;
    -webkit-transform: none;
    transform: none;
    top: 16px;  
}
.vux-next-icon {
    right: 0;
}
.vux-prev-icon::after, .vux-next-icon::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #fa0;
    left: 50%;
    top: 50%;
    margin-top: -4px;
}
.vux-prev-icon::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: -3px;
}
.vux-next-icon::after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin-left: -6px;
}
.inline-calendar th {
    font-size: 12px;
    color: #ccc;
    padding: 5px 0;
}
.inline-calendar td {
    font-size: 14px;
}
.inline-calendar td > span {
    width: 27px;
    height: 27px;
    line-height: 27px;  
}
.inline-calendar td.is-today, .inline-calendar td.is-today.is-disabled {
    color: #fa0;
}
.inline-calendar td.current > span, .inline-calendar td.selected > span {   
    background-color: rgba(255, 170, 0, 0.1);
    color: #333;
    position: relative;
}
.inline-calendar td.current > span::after, .inline-calendar td.selected > span::after, .inline-calendar td::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.inline-calendar td.green::after, .inline-calendar td::after {
    width: 5px;
    height: 5px;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}
.inline-calendar td.green::after {
    background: #89c16c;
}
.inline-calendar td.red::after {
    background: #f38355;
}
.inline-calendar td.current > span::after, .inline-calendar td.selected > span::after { 
    width: 200%;
    height: 200%;
    border: 1px solid #fa0;
    box-sizing: border-box; 
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.inline-calendar td.current::after {
    display: none;
}

/* tabbar */
.tabbar {
    width: 100%;    
    background: rgba(255, 255, 255, 0.95);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
}
.tabbar ul {
    display: -webkit-box;
    display: flex;
}
.tabbar li {
    -webkit-box-flex: 1;
    flex: 1;
    position: relative;
}
.tabbar a {
    display: block;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #aaa;
}
.tabbar li::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 22px;
    background: #e5e5e5;
    -webkit-transform: scale3d(0.5, 1, 1);
    transform: scale3d(0.5, 1, 1);
    right: 0;
    top: 11px;
}
.tabbar li:last-child::after {
    display: none;
}
.tabbar .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: rgb(221, 222, 226);
    margin-right: 8px;
}
.tabbar a span {
    vertical-align: middle;
}
.tabbar .current .icon {
    background-color: rgb(255, 170, 0);
}
.tabbar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    top: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);
}

/* toast */
.mod-toast {
    width: 100%;
    padding: 0 75px;
    box-sizing: border-box;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 9999;
}
.mod-toast p {
    display: inline-block;
    background: rgba(17, 17, 17, 0.7);
    padding: 32px 24px; 
    font-size: 16px;
    line-height: 22px;  
    color: #fff;
    border-radius: 5px;
}

/* button */
[class*="mod-btn-s-"] {
    display: inline-block;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 2px;
    position: relative;
}
[class*="mod-btn-s-"]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.mod-btn-s-1 {
    background: rgb(255, 170, 0);
    color: rgb(255, 255, 255);
}
.mod-btn-s-1::after, .mod-btn-s-3.selected::after {
    display: none;
}
.mod-btn-s-1:active {
    background: rgb(255, 153, 0);
    color: rgba(255, 255, 255, 0.6);
}
.mod-btn-s-1.disabled {
    background: rgba(255, 170, 0, 0.4);
    color: rgba(255, 255, 255, 0.6);
}
.mod-btn-s-2 {
    background: rgb(248, 248, 248);
    color: rgb(53, 53, 53);
}
.mod-btn-s-2::after {
    border-color: rgba(5, 5, 5, 0.1);
}
.mod-btn-s-2:active {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(53, 53, 53, 0.6);
}
.mod-btn-s-3 {  
    color: rgb(255, 170, 0);
}
.mod-btn-s-3::after {
    border-color: rgb(255, 170, 0);
}
.mod-btn-s-3:active {   
    color: #fc6;
}
.mod-btn-s-3:active::after {
    color: #fc6;
}
.mod-btn-s-3.disabled {
    color: rgb(204, 204, 204);
}
.mod-btn-s-3.disabled::after {
    border-color: rgb(204, 204, 204);
}
.mod-btn-s-3.selected {
    background: rgb(255, 170, 0);
    color: rgb(255, 255, 255);
}
.btn-box.fixed {
    padding: 9px 10px 10px;
    border-top: 1px solid #e6e6e6;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    z-index: 99;
}

/* empty */
.mod-empty {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    margin-top: -30px;
}
.mod-empty .icon {
    display: block;
    width: 115px;
    height: 115px;
    margin: 0 auto 10px;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}
.mod-empty .icon_1 {    
    background-image: url(../../static/imgs/icons/icon_1.png);
}
.mod-empty .icon_2 {    
    background-image: url(../../static/imgs/icons/icon_2.png);
}
.mod-empty .icon_3 {    
    background-image: url(../../static/imgs/icons/icon_3.png);
}
.mod-empty .icon_4 {    
    background-image: url(../../static/imgs/icons/icon_4.png);
}
.mod-empty .tip {   
    color: #999;
    font-size: 16px;
    line-height: 22px;
}
.mod-empty .tip_2 {
    font-size: 12px;
    line-height: 16px;
    color: #ccc;
    margin-top: 10px;
}
.mod-empty .weui-btn {
    width: 150px;
    margin-top: 35px;
}

/* crumbs nav */
.mod-crumbs {
    height: 44px;
    line-height: 44px;
    padding-left: 16px;
    background: #fafafa;
    color: #bbb;
}
.mod-crumbs .arrow {
    margin: 0 8px;
    font-family: "Simsun";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #bbb;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    overflow: hidden;
    text-indent: -9999px;
}
.mod-crumbs a {
    color: #f09835;
}
.mod-crumbs a, .mod-crumbs span {
    vertical-align: middle;
}

/* avatar box */
.avatar-box {
    float: left;    
    position: relative;
}
.avatar-box .cover {    
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    left: 0;
    top: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

</style>
<!-- <style src="../../static/css/attendance-set.css"></style> -->
<style>
    .weui-label {
    color: #333;
}
.weui-cell__bd .tip {
    color: #aaa;
    font-size: 13px;
    margin-left: 4px;
}
.block {
    display: block;
}
.add-team {
    overflow: hidden;
    padding: 0 0 6px 12px;
}
.add-team .team {
    float: left;
    height: 36px;
    line-height: 36px;
    padding: 0 6px;
    background: rgba(255, 190, 106, 0.1);
    border-radius: 2px;
    font-size: 14px;
    color: #fa0;    
    margin: 0 10px 12px 0;
}
.add-team .button {
    float: left;
    width: 36px;
    height: 36px;
    /* border: 1px solid rgba(255, 170, 0, 0.7); */
    border: 1px solid #bbb;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 12px;
}
.add-team .button::before, .add-team .button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    /* background: #fa0; */
    background: #bbb;
}
.add-team .button::before {
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
}
.add-team .button::after {
    width: 2px;
    height: 16px;
    margin: -8px 0 0 -1px;
}
.attendance-set .btn_add {
    display: block;
    height: 48px;
    line-height: 48px;
    color: #fa0;
    text-align: center;
}
.attendance-set .btn_add::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: -63px -23px;
    margin-right: 6px;
    vertical-align: middle;
}
.attendance-set .btn_add span {
    vertical-align: middle;
}
.weui-cell_access .weui-cell__ft.down:after {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.weui-cell_access .weui-cell__ft.up:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.page.show-footerBtn {
    padding-bottom: 76px;
}
.item-content { 
    margin-top: -1px;   
}
.item-content li {
    padding: 12px 40px 12px 30px;
    background: #fff;
}
.item-content h3 {
    color: #888;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 4px;
}
.item-content p {
    color: #bbb;
    line-height: 22px;  
}
.item-content h3, .item-content p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-content li:not(:last-child)::after {
    left: 30px;
}
.item-content .icon_location {
    position: absolute;
    width: 11px;
    height: 14px;
    background-position: -17px -513px;
    left: 12px;
    top: 16px;
}
.item-content .btn_delete {
    position: absolute;
    width: 18px;
    height: 18px;
    background-position: -46px 0;
    right: 12px;
    top: 50%;
    margin-top: -9px;
}
.weui-cells.sub-option {
    margin-top: 0;  
}
.weui-cells.sub-option .weui-cell {
    padding-left: 30px;
}
.weui-cells.sub-option .weui-cell::before {
    left: 30px;
}
.weui-cells.sub-option::before {
    display: none;
}
.weui-cells.option-set::after {
    left: 12px;
}
.attendance-set .section {
    margin-top: 12px;
}
.mod-set {
    padding: 16px 12px;
}
.mod-set .top {
    overflow: hidden;
    margin-bottom: 20px;
}
.mod-set h2 {
    float: left;
    font-size: 16px;
    font-weight: normal;
    line-height: 30px;
}
.mod-set .tabs {
    float: right;
}
.mod-set .tabs li {
    float: left;
}
.mod-set .tabs a {
    float: left;
    width: 66px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #fa0;
    color: #fa0;
}
.mod-set .tabs .current {
    background: #fa0;
    color: #fff;
}
.mod-set .tip {
    font-size: 13px;
    line-height: 18px;
    text-align: right;
    color: #aaa;
}
.mod-set + .weui-cells, .title-bar + .weui-cells {
    margin-top: 0;
}
.week-list {
    padding: 18px 6px 3px;
    overflow: hidden;
}
.week-list li {
    float: left;
    width: 20%;
    padding: 0 6px;
    box-sizing: border-box;
    margin-bottom: 15px;
}
.week-list span {
    display: block;
    height: 35px;
    line-height: 35px;
    background: #f6f6f6;
    border-radius: 1px;
    text-align: center;
    font-size: 14px;
    color: #888;
    position: relative;
}
.week-list::before {
    left: 12px;
}
.week-list .selected::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: url(../../static/imgs/icon_selected.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    right: 0;
    top: 0;
}
.title-bar {
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
}
.title-bar h2 {
    float: left;
    font-size: 16px;
    font-weight: normal;
    color: rgb(189, 192, 199);
}
.title-bar .btn_delete {
    position: absolute;
    width: 22px;
    height: 22px;
    background-position: 5px -627px;
    right: 10px;
    top: 13px;
}
.section + .btn_add {
    margin-top: 12px;
}
.weui-check__label + .upload-pic {
    padding: 8px 0 6px 47px;
    overflow: visible;
}
.graid-item{
    /* width: 100%; */
    display: flex;
    /* justify-content: space-between; */
    /* margin-top: 8px; */
    padding: 8px;
    margin: 8px 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(242, 242, 242);
}
.graid-item:first-child{
    margin-top: 0;
}
.graid-item-label{
    width: 120px;
    color: rgb(122, 133, 147);

}
.graid-item-text{
    display: auto;
    word-break: break-all;
    color: rgb(122, 133, 147);
    /* text-align: left; */
}
.img{
    display: block;
	width: 60px;
	height: 60px;
}

</style>
